<template>
    <div class="login-page">
        <div class="container">
            <div class="header">
                <img class="logo" src="@/assets/logo.png" alt="" />
                <span class="title">睿云中台</span>
            </div>

            <div class="form-title">使用 OA 账号登录</div>

            <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules">
                <el-form-item prop="username">
                    <el-input autofocus v-model="loginForm.username" placeholder="用户名"></el-input>
                </el-form-item>
                <!-- <el-tooltip v-model="capsTooltip" manual content="大写锁定已打开" placement="right"> -->
                <el-form-item prop="password">
                    <el-input autofocus v-model="loginForm.password" placeholder="密码"
                        :type="showPass ? 'text' : 'password'" @keyup.enter="onLogin" :loading="loading">
                        <template #suffix>
                            <i class="iconfont form-icon form-icon-suf"
                                :class="[showPass ? 'el-icon-view' : 'icon-bukejian2']"
                                @click="showPass = !showPass"></i>
                        </template>
                    </el-input>
                </el-form-item>
                <!-- </el-tooltip> -->
                <el-form-item>
                    <el-button class="login-btn" type="primary" @click="onLogin">登录</el-button>
                </el-form-item>
            </el-form>

            <div class="footer">如有需要，请钉钉联系管理员开通授权</div>
            <!-- <div class="footer">测试账号：admin/abc123456</div> -->
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { useStore } from 'vuex';
import { useRoute } from 'vue-router';
import { pageJump } from '@/global/location-transfer';


const route = useRoute();

// 获取store = vue2中的 this.$store
const store = useStore();

// 是否显示密码
const showPass = ref(false);

// form 表单数据
const loginForm = ref({
    username: '',
    password: ''
});

// rules 规则证验
const loginRules = ref({
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' }
    ]
});
// form表单 ref
const loginFormRef = ref(null);
// 登录状态
const loading = ref(false);
// 大小写锁定标识
const capsTooltip = ref(false);

// 检查大小写是否锁定
const checkCapslock = ({ shiftKey, key }) => {
    if (key && key.length === 1) {
        if (shiftKey && (key >= 'a' && key <= 'z') || !shiftKey && (key >= 'A' && key <= 'Z')) {
            capsTooltip.value = true
        } else {
            capsTooltip.value = false
        }
    }
    if (key === 'CapsLock' && capsTooltip.value === true) {
        capsTooltip.value = false
    }
}



function onLogin() {

}

</script>

<style lang="scss" scoped>
.login-page {
    /* position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; */
    width: 100%;
    min-height: 100%;
    padding: 110px 0 144px;
    /* background-image: url(~@/assets/img/login_bg2.jpg); */
    background-repeat: no-repeat;
    background-position: center 110px;
    background-size: 100%;

    .container {
        width: 368px;
        min-width: 260px;
        margin: 0 auto;

        .header {
            height: 44px;
            line-height: 44px;
            text-align: center;

            .logo {
                height: 44px;
                margin-right: 16px;
                vertical-align: top;
                border-style: none;
            }

            .title {
                position: relative;
                font-weight: 600;
                font-size: 33px;
            }
        }

        .form-title {
            margin-top: 40px;
            margin-bottom: 20px;
            text-align: center;
            font-size: 18px;
        }

        .footer {
            // color: $--color-text-placeholder;
            text-align: center;
            margin-top: 50px;
        }
    }

    .login-btn {
        width: 100%;
        margin-top: 10px;
    }

    .form-icon-suf {
        cursor: pointer;
    }
}
</style>
